*{
    margin: 0;
    padding: 0;
}
ol,ul{
    list-style: none;
}
img{
    display: block;
    width: 100%;
}
.carousel{
    position: relative;
    width: 100%;
    overflow: hidden;
    ul{
        width: 500%;
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        transition: all .7s linear;
        li{
            width: 100%;
        }
    }
    ol{
        position: absolute;
        bottom: 7%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 10px;
        li{
            width: 10px;
            height: 10px;
            border: 2px solid #fff;
            border-radius: 50%;
            transition: all .2s linear;
            &.active{
                background: #fff;
            }
        }
    }
}